<template>
	<div class="box-black">
		<div style="position: relative;">
			<div class="printbtn">
				<span @click="closeFunction">关闭</span>
				<span @click="printFun">成绩单打印</span>
				<!-- <span style="color:#f00;">（为了打印文件的整洁请先调整为1920的分辨率再使用打印）</span> -->
			</div>
			<div style="width: 792px;margin: 30px auto;position: relative;">
				<div class="body" id="pdfWrap">
					<div class="header">
						<img src="../../assets/home/logo.png" />
						<div>
							第二课堂成绩单
							<!-- <span>TRANSCRIPT OF THE SECOND CLASS</span> -->
						</div>
					</div>
					<img :src="ScoreQRImage" style="position: absolute;right: 30px;top: 50px;width: 120px;"/>
					<div class="mainbody">
						<h2>基础信息</h2>
						<div class="basics flex">
							<div class="id-photo" style="padding-top: 5px;">
								<img :src="getImg()" />
							</div>
							<div class="id-info">
								<div>姓名：{{ myinfo.Name }}</div>
								<div>性别：{{ myinfo.Sex=='1'?'男':myinfo.Sex=='2'?'女':"" }}</div>
								<!-- <div>成绩单编号：{{ myinfo.Name }}</div> -->
								<div>班级：{{ myinfo.ClassName }}</div>
							</div>
							<div class="id-info" style="margin-left: 80px;">
								<div>学号：{{ myinfo.UserNo }}</div>
								<div>学院： {{ myinfo.DepartName }}</div>
								<div>年级：{{ myinfo.Grade }}</div>
							</div>
						</div>
						<div class="img-text flex">
							<div class="flex-1">
								<h2>能力模型</h2>
								<div ref="chart1" style="height: 270px;"></div>
							</div>
							<div class="flex-1">
								<h2>学期{{myinfo.ScoreName||'积分'}}曲线图</h2>
								<div style="text-align: right;margin-right: 36px;">单位：分数</div>
								<div ref="chart2" style="height: 270px;position: relative;top: 18px;"></div>
							</div>
						</div>
						<div class="mainbody" style="position:relative;padding: 0;">
							<h2>{{myinfo.ScoreName||'积分'}}详情</h2>
							<div class="tabWork">
								<div class="boxmaina-title flex">
									<div style="width:35%;">课程大类</div>
									<div style="width:15%;">小计</div>
									<div style="width:35%;">课程大类</div>
									<div style="width:15%;">小计</div>
								</div>
								<div style="border-left: 1px solid #eee;border-bottom: 1px solid #eee;">
								<div class="boxmain-content boxmain-content1" v-for="(item,index) in scoreList" :key="item.ActivityTypeID" style="display: inline-block;width: 50%;">
									<div class="flex" >
										<div style="width:70%;">{{item.ActivityTypeName}}</div>
										<div style="width:30%;padding-left: 14px;border-left: 1px solid #eee;">{{item.Sum}}</div>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="body">
					<div class="mainbody" style="margin-top: 0;">
						<h2>工作履历</h2>
						<div class="tabWork">
							<div class="boxmaina-title flex">
								<div style="color:#000;width:38%;">学期</div>
								<div style="color:#000;width:47%;">职务全称</div>
								<div style="color:#000;width:15%;">分值</div>
							</div>
							<div class="box-tha" style="border-bottom: 1px solid #eee;">
								<div class="boxmain-content flex" v-for="(item, i) in UserPostList" :key="i">
									<div style="width:38%;">{{ item.SemesterName }}</div>
									<div style="width:47%;border-left: 1px solid #eee;">{{ item.Title }}</div>
									<div style="width:15%;border-left: 1px solid #eee;">{{ item.Score }}</div>
								</div>
								<div class="nothing" v-if="UserPostList.length == 0"></div>
							</div>
						</div>
					</div>
					<div class="mainbody" style="margin-top:15px;position:relative">
						<h2>获奖记录 <span @click="seeList('UserPrize')" style="cursor: pointer;">更多&nbsp;&nbsp;</span></h2>
						<div class="tabWork">
							<div class="boxmaina-title flex">
								<div style="color:#000;width:38%;">活动名称</div>
								<div style="color:#000;width:47%;">奖项</div>
								<div style="color:#000;width:15%;">{{myinfo.ScoreName||'积分'}}</div>
							</div>
							<div class="box-tha" style="border-bottom: 1px solid #eee;">
								<div class="boxmain-content flex" v-for="(item, i) in prizesList.filter((m,n) => n<5)"
									:key="i">
									<div style="width:38%;">{{ item.ActivityName }}{{item.Type == '2'?item.Title:''}}</div>
									<div style="width:47%;border-left: 1px solid #eee;">
										{{ item.ActivityTypePrizeTitle||item.title }}{{ item.PrizeTitle?' | '+item.PrizeTitle:'' }}
									</div>
									<div style="width:15%;border-left: 1px solid #eee;">{{ item.Score }}</div>
								</div>
								<div class="nothing" v-if="prizesList.length == 0"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import html2Canvas from 'html2canvas';
	import JSPDF from 'jspdf';
	import Cache from '@/utils/cache';
	import {
		UserDoGetScoreList,
		UserCenterDoGetSemesterScoreDetailList,
		UserGetActivityTypeListByParentIDCommon,
		GetPrizePageListCenter,
		UserCenterDoGetUserPostList,
		UserCenterDoGetActivityTypeScoreRateList,
		UserCenterDoGetSemesterScoreList,
		CenterScoreQRImage,
		CenterDoGetActivityTypeScorList,
		UserCenterDoGetSumScoreList
	} from '@/api/follow';
	export default {
		props:{
			ActivityTypeListByParentID:Array
		},
		data() {
			return {
				publicUrl:'',
				ActivityTypeList: [],
				listone: [],
				myinfo: Cache.get('myInfo'),
				token:Cache.get('token'),
				scoreList: [],
				UserPostList: [],
				prizesList: [],
				sunNumList: [],
				sunNumIndex: 0,
				scoreGroupList:[],
				url:this.global.requestUrl,
				ScoreQRImage:'',
				tableData: [{
					sxueqi: '学期',
					kc: [{
						name: '思政学习',
						kclei: [{
								name: '青马班、团课等培训',
								value: '0.2'
							},
							{
								name: '青马班、团课等培训',
								value: '0.2'
							},
							{
								name: '青马班、团课等培训',
								value: '0.2'
							},
							{
								name: '青马班、团课等培训',
								value: '0.2'
							}
						],
						score: '12.20'
					}]
				}]
			};
		},
		computed: {
			totalScore() {
				return this.$store.state.score;
			}
		},
		mounted() {
			this.GetEcharts()
		},
		created() {
			this.GetSumScoreList()
			this.getList();
			this.ScoreQRImage =this.url+'/User/Center/ScoreQRImage?userToken='+this.token
		},
		methods: {
			getImg(){
				if(this.myinfo.HeadImage){
					if(this.myinfo.HeadImage.includes('Upload')){
						let Img = new Image()
						Img.src = this.url+this.myinfo.HeadImage
						if (Img.fileSize > 0 || (Img.width > 0 && Img.height > 0)) {
							return this.url+this.myinfo.HeadImage
						} else {
						  return require('@/assets/home/zanwu.png')
						}
					}else{
						return this.myinfo.HeadImage
					}
				}else{
					return require('@/assets/home/zanwu.png')
				}
			},
			moment,
			async closeFunction(data) {
				this.$emit('closeFun', data);
			},
			async GetEcharts() {
				let data = {};
				let res = await UserCenterDoGetActivityTypeScoreRateList(data);
				let echartData = res.data.data;
				let arrechart = []
				for (let i = 0; i < echartData.length; i++) {
					arrechart.push({
						value: echartData[i].Rate,
						name: echartData[i].ActivityTypeName,
					})
				}
				this.getEchartData(arrechart)
				//积分曲线
				let res1 = await UserCenterDoGetSemesterScoreList(data);
				let arrs = res1.data.data
				let arr1 = []
				let arr2 = []
				for (let i = 0; i < arrs.length; i++) {
					arr1.push(arrs[i].Score)
					arr2.push(arrs[i].SemesterTime)
				}
				this.getEchartData1(arr1, arr2)
			},
			getEchartData(arrechart) {
				const chart = this.$refs.chart1
				if (chart) {
					const myChart = this.$echarts.init(chart)
					const option = {
						tooltip: {
							trigger: 'item',
							formatter: (item) => {
								let txtCon = `${item.data.name}</br><b>${item.percent?item.percent:0}%<b>`;
								return txtCon
							},
						},
						legend: {
							bottom: 0,
							left: 'center',
						},
						color: ['#FECA57', '#26B30B', '#FE5578', '#6D12E0', '#3F81FF', '#FF7425', '#57D0FE',
							'#DB3DC0'
						],
						series: [{
							type: 'pie',
							radius: '50%',
							data: arrechart,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData1(arr1, arr2) {
				const chart = this.$refs.chart2
				if (chart) {
					const myChart = this.$echarts.init(chart)
					const option = {
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: arr2,
							// axisLabel: {
							//        //x轴文字的配置
							//        show: true,
							//        //使x轴文字显示全
							//        interval: 0,
							//        //倾斜角度
							//        rotate : 15,
							//    },
							axisLabel: {
								interval: 0,
								formatter: function(value) {
									return value.split("|").join("\n");
								}
							}

						},
						yAxis: {
							type: 'value',
							axisLine: {
								show: false, //隐藏y轴
							},
						},
						legend: {
							bottom: 50
						},
						series: [{
							data: arr1,
							type: 'line',
							itemStyle: {
								normal: {
									areaStyle: {
										type: 'default'
									},
									color: '#3F81FF'
								}
							},
							areaStyle: {}
						}]
					};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			//获取表格数据
			async GetSumScoreList() {
				let res = await CenterDoGetActivityTypeScorList();
				this.scoreList = res.data.data
				// let list = this.ActivityTypeListByParentID
				// for (let i = 0, len = list.length; i < len; i++) {
				// 	let data = {};
				// 	data.activityTypeID = list[i].ID;
				// 	let res1 = await UserCenterDoGetSumScoreList(data);
				// 	list[i] = {
				// 		...list[i],
				// 		data: res1.data.data,
				// 		totalScore: res1.data.total
				// 	};
				// }
				// console.log(list);
				// this.scoreList = list;
			},
			async getList() {
				let data = {};
				let res = await GetPrizePageListCenter(data);
				this.prizesList = res.data.data;
				let postres = await UserCenterDoGetUserPostList()
				this.UserPostList = postres.data.data
			},
			seeList(name) {
				content.scrollIntoView()
				this.$router.push({
					name: name
				});
			},
			printFun() {
				let ele = document.querySelector('#pdfWrap')
				let eleW = ele.offsetWidth; // 获得该容器的宽
				let eleH = ele.offsetHeight; // 获得该容器的高
				let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
				let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

				var canvas = document.createElement("canvas");
				var abs = 0;

				let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
				let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

				if (win_out > win_in) {
					// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
					abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
					// console.log(a, '新abs');
				}
				canvas.width = eleW * 2; // 将画布宽&&高放大两倍
				canvas.height = eleH * 2;

				var context = canvas.getContext("2d");
				context.scale(2, 2);
				context.translate(-eleOffsetLeft - abs, -eleOffsetTop);

				html2Canvas(ele, {
					dpi: 300,
					allowTaint: true,
					width: 792,
					scale: 2,
					// allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
					useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
				}).then((canvas) => {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 595.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595;
					var imgHeight = 594.5 / contentWidth * contentHeight;
					var pageData = canvas.toDataURL('image/jpeg', 1.0);

					var pdf = new JSPDF('', 'pt', 'a4');
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
					// if (leftHeight < pageHeight) {
					// 	pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
					// } else {
					// 	while (leftHeight > 0) {
					// 		pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
					// 		leftHeight -= pageHeight;
					// 		position -= 841.89;
					// 		if (leftHeight > 0) {
					// 			pdf.addPage();
					// 		}
					// 	}
					// }
					pdf.save(`${this.myinfo.Name}${this.myinfo.UserNo}` + '.pdf');
				})
			}

		}
	};
</script>

<style lang="less" scoped>
	.box-black{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 99;
		overflow-y: scroll;
	}
	.fenjie {
		background: red;
	}

	.printbtn {
		position: absolute;
		top: 0px;
		right: 50px;
		// width: 140px;

		z-index: 999;

		span {
			display: inline-block;
			height: 34px;
			line-height: 34px;
			text-align: center;
			float: right;
			color: #4577eb;
			background: #fff;
			box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.06);
			border: none;
			padding: 0 10px;
			border-radius: 10px;
			font-size: 12px;
			cursor: pointer;
			margin-left: 10px;
		}
	}

	.nothing {
		height: 62px;
		line-height: 100px;
		text-align: center;
		background: url(../../assets/nothing.png) center center no-repeat;
		color: #999 !important;
		background-size: 40px 40px;
		font-size: 14px;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.box-th {
		height: 40px;
		line-height: 40px;

		.boxmain {
			overflow: hidden;
			text-align: center;
			font-weight: bold;

			.con {
				width: 60px;
			}
		}
	}

	.box-tr {
		border-top: 1px solid #fff;
		text-align: center;
		min-height: 40px;

		.boxLeft {
			width: 100px;
			display: -moz-box;
			-moz-box-pack: center;
			-moz-box-align: center;

			/* Safari、Opera 以及 Chrome */
			display: -webkit-box;
			-webkit-box-pack: center;
			-webkit-box-align: center;

			/* W3C */
			display: flex;
			box-pack: center;
			box-align: center;
		}

		.box-Right {
			overflow: hidden;
			line-height: 40px;
		}

		.cell {
			width: 50%;
			float: left;
			border-bottom: 1px solid #fff;
			font-size: 14px;

			.cellcon {
				width: 60px;
			}
		}
	}

	body,
	html,
	p {
		margin: 0;
		padding: 0px;
	}

	.body1 {
		background-image: url(../../assets/home/cjd-bg.png);
		background-color: #fff;
		background-size: 772px 1102px;
		background-position: 10px 10px;
		width: 792px;
		padding: 45px 20px;
		height: 1122px;
		background-repeat: no-repeat;

		.boxmain-content>div>.flex {

			&:last-child {

				.box-border,
				.nothing1 {
					border-bottom: 0;
				}
			}
		}

		.border-bot {
			color: #000;

			&:last-child {
				border-bottom: 0 !important;
			}
		}

		.mainbody {
			h2 {
				font-size: 18px;
				font-weight: bold;
				color: #000;
				margin: 15px 0;

				span {
					font-size: 14px;
					float: right;
					font-weight: normal;
				}
			}

			.boxmaina-title {
				line-height: 50px;
				color: #000;
				font-weight: bold;
				font-size: 17px;
				background: rgb(233, 241, 255);
				div {
					box-sizing: border-box;
					padding-left: 15px;
				}
			}

			.box-tha {
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
			}


		}
	}

	.boxmain-content {
		border: 0;
		div{
			padding-left: 8px;
			box-sizing: border-box;
			line-height: 3 !important;
		}
		.center-align {
			position: relative;
			top: 0;
			bottom: 0;
			margin: auto;
			font-size: 14px;
			color: #000;
			text-align: center;
			line-height: 1.6;
		}

		.nothing1 {
			padding: 5px 8px;
			border-bottom: 1px solid #eee;
			width: 55%;

		}

		.flex {
			line-height: 35px;

			.bor-bott {
				.flex {
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: 0;
					}
				}

			}

			.box-border {
				padding: 5px 8px;
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;


			}
		}

	}

	.body {
		background-image: url(../../assets/home/cjd-bg.png);
		background-color: #fff;
		background-size: 772px 1102px;
		background-repeat: no-repeat;
		background-position: 10px 10px;
		width: 792px;
		height: 1122px;
		padding: 45px 20px;

		.mainbody {
			padding-left: 10px;
			padding-right: 10px;
			margin-top: 30px;
			h2 {
				font-size: 18px;
				font-weight: bold;
				color: #000;
				margin: 35px 0 25px 0;

				span {
					font-size: 14px;
					float: right;
					font-weight: normal;
				}
			}

			.basics {
				padding: 20px;

				.id-photo {
					width: 106px;
					height: 150px;
					overflow: hidden;
					margin-right: 35px;
					img {
						width: 100%;
					}
				}

				.id-info {
					font-weight: bold;
					font-size: 17px;
					color: #000;
					line-height: 2.2;
					div {}

				}
			}

			.evaluate {
				font-weight: bold;
				font-size: 17px;
				color: #000;
				line-height: 2.4;
				margin-left: 15px;

				img {
					margin-left: 15px;
				}
			}

			.post {
				text-align: right;
				font-weight: bold;
				font-size: 18px;
				margin-top: 47px;
				color: #000;
			}

			.nothing {
				border: 1px solid #eee;
				padding: 15px;
			}

			.boxmaina-title {
				line-height: 50px;
				color: #000;
				font-weight: bold;
				font-size: 17px;
				background: rgb(233, 241, 255);
				div {
					box-sizing: border-box;
					padding-left: 15px;
				}
			}
			
			.boxmain-content {
				border: 1px solid #eee;
				border-bottom: 0;
				line-height: 50px;
				font-size: 15px;
			}
			.boxmain-content1 {
				border-left: 0 !important;
			}
		}
	}

	.header {
		height: 40px;
		text-align: center;
		position: relative;

		img {
			height: 25px;
			position: absolute;
			top: 5px;
			left: 28px;
		}

		div {
			font-size: 22px;
			color: #000;
			font-weight: bold;

			span {
				display: block;
				font-size: 12px;
				color: #A38E86;
				font-weight: normal;
			}
		}
	}
</style>
